<template>
  <div>
    <!-- 头部 -->
    <headers />
    <!-- nav导航栏 -->
    <navLlist></navLlist>

    <!-- 内容区域 -->
    <div class="main-box">
      <!-- 面包屑 -->
      <div class="main_bread">
        <el-breadcrumb separator-class="el-icon-arrow-right">
          <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
          <el-breadcrumb-item>全部商品</el-breadcrumb-item>
          <el-breadcrumb-item v-show="!search">分类</el-breadcrumb-item>
          <el-breadcrumb-item v-show="search">搜索</el-breadcrumb-item>
          <el-breadcrumb-item v-show="search">{{search}}</el-breadcrumb-item>
        </el-breadcrumb>
      </div>

      <!-- 分类标签 -->
      <div class="main_cate">
        <div class="title">分类</div>
        <el-tabs v-model="activeName" type="card">
          <el-tab-pane
            v-for="item in cateList"
            :key="item.category_id"
            :label="item.category_name"
            :name="'' + item.category_id"
          ></el-tab-pane>
        </el-tabs>
      </div>

      <!-- 商品列表区域 -->
      <div class="main_body">
        <div class="list">
          <goods :listData="goodsList" :isMore="true" />
          <div v-if="!goodsList.length" class="list_title">
            抱歉没有找到相关的商品，请看看其他的商品
          </div>
        </div>
        <!-- 分页 -->
        <div v-if="goodsList.length" class="pagination">
          <el-pagination
            background
            layout="prev, pager, next"
            :total="total"
            :page-size="pageSize"
            @current-change="currentChange"
          >
          </el-pagination>
        </div>
      </div>
    </div>

    <!-- 底部 -->
    <footers></footers>
  </div>
</template>

<script>
import footers from "../footer/Footer";
import headers from "../header/Header";
import navLlist from "../../views/nav/Nav";
import getAllCateyApi from "../../api/goods";
import goods from "../section/Section";
export default {
  components: { headers, navLlist, goods, footers },
  name: "",
  data() {
    return {
      // cid: "0",
      search: "",
      activeName: "0",
      cateList: [], //分类名称列表
      goodsList: [], //所有商品列表
      categoryID: [],
      currentPage: 1,
      pageSize: 15,
      total: 0,
    };
  },


  mounted() {
    let query = this.$route.query;
    console.log("query", query);
    this.search = query.search;
  },
  created() {
    //获取分类列表
    this.getCategory();
    //获取所有商品列表
    this.getGoodsList("getAllGoods");
  },
  activated() {
    // let query = this.$route.query;
    // console.log("query", query);
    // this.search = query.search

    this.activeName = "-1"
  },
  methods: {
    // 向后端请求分类列表数据
    async getCategory() {
      let { data: res } = await getAllCateyApi.getAllCate();

      this.cateList = res.category;
      this.cateList.unshift({
        category_id: "0",
        category_name: "全部",
      });
      // console.log(this.cateList);
    },

    //合并方法
    async getGoodsList(apiName = "getProductByCategory") {
      let sendData = {
        categoryID: this.categoryID,
        currentPage: this.currentPage,
        pageSize: this.pageSize,
      };

      let { data: res } = await getAllCateyApi[apiName](sendData);

      // console.log(res.Product);
      this.goodsList = res.Product;
      this.total = res.total;
    },

    //请求所有商品列表
    // async getGoodsList() {
    // let sendData = {
    //   categoryID: this.categoryID,
    //   currentPage: this.currentPage,
    //   pageSize: this.pageSize,
    // };
    // let { data: res } = await getAllCateyApi.getAllGoods(sendData);
    // console.log(res.Product);
    // this.goodsList = res.Product;
    // this.total = res.total;
    // },

    //请求单类商品列表
    // async getProductByCategory() {
    //   let sendData = {
    //     categoryID: this.categoryID,
    //     currentPage: this.currentPage,
    //     pageSize: this.pageSize,
    //   };
    //   let { data: res } = await getAllCateyApi.getProductByCategory(sendData);
    //   console.log(res.Product);
    //   this.goodsList = res.Product;
    //   this.total = res.total;
    // },

    //分页
    currentChange(currentPage) {
      this.currentPage = currentPage;
    },

    //搜索
    async getProductBySearch() {
      let sendData = {
        search: this.search,
        currentPage: this.currentPage,
        pageSize: this.pageSize,
      };

      let { data: res } = await getAllCateyApi.getProductBySearch(sendData);

      // console.log(res.Product);
      this.goodsList = res.Product;
      this.total = res.total;
    },

    // changeTab(e) {
    //   console.log(this.cid);
    // },
  },
  watch: {
    activeName(value) {
      // console.log(value);
      let categoryID = Number(value);
      this.categoryID = [categoryID];

      //每次切换分类都要重置分页数据
      this.currentPage = 1;
      this.total = 0;
      this.search = "";

      //根据分类ID确定是所有商品还是单独类商品
      if (categoryID === 0) {
        //获取全部商品
        this.categoryID = [];
        this.getGoodsList("getAllGoods");
      } else {
        this.getGoodsList();
      }
    },

    //分页被改变的时候
    currentPage(currentPage) {
      if (!this.categoryID.length) {
        this.getGoodsList("getAllGoods");
        return;
      }

      this.getGoodsList();
    },

    //搜索被触发的时候
    // search(value) {
    //   console.log("搜索监听", value);
    //   this.getProductBySearch();
    // },

    //监听路由改变
    $route(value) {
      console.log(value);
      if (value.query.search) {
        this.search = value.query.search;
        this.getProductBySearch();
        return
      }
      this.categoryID = value.query.categoryId;
      this.getGoodsList()
    },

  },
  computed: {},
};
</script>

<style lang="scss" scoped>
.main-box {
  width: 100%;

  .main_bread {
    max-width: 1225px;
    margin: 0 auto;
    padding: 0;
  }

  .main_cate {
    max-width: 1225px;
    margin: 20px auto;
    padding: 0;
    display: flex;
    height: 40px;
    line-height: 40px;
  }
  .title {
    font-size: 15px;
    font-weight: 700;
  }

  //商品区域的样式
  .main_body {
    width: 100%;
    min-height: 800px;
    background: #f5f5f5;
    // background: pink;
    padding: 20px;
    .list {
      width: 85%;
      margin: 20px auto;
    }
    .list_title {
      color: #333;
      // margin-left: 13.7px;
    }
    .pagination {
      width: 85%;
      display: flex;
      justify-content: center;
    }
  }
}
</style>